<template>
	<el-card class="box">
		<el-col :span="18" :offset="1">
        <el-form ref="passwordForm" :label-position="labelPosition" label-width="120px" :model="formData" :size="formSize" :rules="rules">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input type="password" v-model="formData.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="formData.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input type="password" v-model="formData.confirmPwd"></el-input>
          </el-form-item>
          <el-form-item size="mini" class="floatLeft">
            <el-button type="primary" @click="formOnSubmit">提交</el-button>
          </el-form-item>
        </el-form>
    </el-col> 
	</el-card>
</template>
<script>
    import router from '@/router/index';

    export default { 
        data () {
            return {
              labelPosition : this.global.labelPosition,
              formData : {
                  oldPassword : "",
                  newPassword : "",
                  confirmPwd : ""
                },
                formSize : "mini",
                rules: {
                    oldPassword: [{required: true, message: '请输入原密码', trigger: 'blur' }],
                    newPassword: [
                      {required: true, message: '请输入新密码', trigger: 'blur' },
                      {validator: this.validateNewPassword, trigger: 'blur' }              
                    ],
                    confirmPwd: [
                      {required: true, message: '请再次输入密码', trigger: 'blur' },
                      {validator: this.validateConfirmPwd, trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
           formOnSubmit : function(){
                this.$refs["userInfoForm"].validate((valid) => {
                    if (valid) {
                        this.submitFormData();
                    } else {
                        return false;
                    }
                });
            },
            submitFormData : function(){//提交From表单数据
                console.info(this.formData);
            },
            validateNewPassword : function(rule, value, callback){
              if (value === '') {
                  callback(new Error('请输入密码'));
              } else {
                  if (this.formData.confirmPwd !== '') {
                    this.$refs.passwordForm.validateField('confirmPwd');
                  }
                  callback();
              }
            },
            validateConfirmPwd : function(rule, value, callback){
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.formData.newPassword) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }
        },
        watch: {
            
        },
        created: function(){ 

        },
        beforeDestroy:function(){
          
        }
    }
</script>